<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>农业技术知识库与智能问答系统</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="js/axios.min.js"></script>
  <script src="js/register.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            neutral: '#F9FAFB',
            'neutral-dark': '#1F2937'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }  
	
	//读取用户数据的代码：
	document.addEventListener('DOMContentLoaded', function () {
        const usernameDisplay = document.getElementById('username-display');
        const userProfile = document.getElementById('user-profile');
        const loginBtn = document.getElementById('login-btn');
  
        // 从 localStorage 中读取用户名
        const username = localStorage.getItem('username');
  
        if (username) {
          // 更新 UI 显示用户名
          usernameDisplay.textContent = username;
          userProfile.classList.remove('hidden');
          loginBtn.classList.add('hidden');
        } else {
          // 用户未登录，隐藏用户信息区域，显示登录按钮
          userProfile.classList.add('hidden');
          loginBtn.classList.remove('hidden');
        }
  
        // 为退出登录按钮添加点击事件处理函数
        const logoutBtn = document.getElementById('logout-btn');
        if (logoutBtn) {
          logoutBtn.addEventListener('click', function () {
            // 清除 localStorage 中的用户数据
            localStorage.removeItem('token');
            localStorage.removeItem('username');
            // 隐藏用户信息区域，显示登录按钮
            userProfile.classList.add('hidden');
            loginBtn.classList.remove('hidden');
          });
        }
      });
	  
	  
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-link {
        @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
      }
      .sidebar-link.active {
        @apply bg-primary/10 text-primary font-medium;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .btn-primary {
        @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all duration-200;
      }
      .btn-secondary {
        @apply bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-all duration-200;
      }
      .input-field {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-200;
      }
	    /* 如果你没用 Tailwind，可以这样写原生 CSS */
	    #qa-answer {
	      white-space: pre-wrap;
	      word-break: break-word;
	      line-height: 1.6;
	      max-height: 500px;
	      overflow-y: auto;
	      padding-right: 4px;
	    }

    }
  </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
  <!-- 主容器 -->
  <div class="flex min-h-screen">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white shadow-lg fixed h-full transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-20">
      <div class="flex items-center justify-between p-4 border-b">
        <h1 class="text-xl font-bold text-primary flex items-center gap-2">
          <i class="fa fa-leaf"></i>
          <span>农业知识库</span>
        </h1>
        <button id="close-sidebar" class="lg:hidden text-gray-500 hover:text-gray-700">
          <i class="fa fa-times"></i>
        </button>
      </div>
      
      <nav class="p-4">
        <ul class="space-y-1">
          <li><a href="#home" class="sidebar-link active" data-page="home">
            <i class="fa fa-home w-5 text-center"></i>
            <span>首页</span>
          </a></li>
          <li><a href="#knowledge" class="sidebar-link" data-page="knowledge">
            <i class="fa fa-book w-5 text-center"></i>
            <span>知识库</span>
          </a></li>
          <li><a href="#qa" class="sidebar-link" data-page="qa">
            <i class="fa fa-question-circle w-5 text-center"></i>
            <span>智能问答</span>
          </a></li>
          <li><a href="#my-questions" class="sidebar-link" data-page="my-questions">
            <i class="fa fa-list-alt w-5 text-center"></i>
            <span>我的提问</span>
          </a></li>
        </ul>
        
        <div class="absolute bottom-4 left-4 right-4">
          <div id="user-profile" class="hidden p-4 bg-gray-50 rounded-lg">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                <i class="fa fa-user"></i>
              </div>
              <div>
                <p id="username-display" class="font-medium text-sm">用户名</p>
                <p class="text-xs text-gray-500">查看个人信息</p>
              </div>
            </div>
            <button id="logout-btn" class="w-full mt-3 text-sm text-gray-600 hover:text-red-500">
              <i class="fa fa-sign-out mr-1"></i> 退出登录
            </button>
          </div>
          
          <button id="login-btn" class="w-full btn-primary">
            <i class="fa fa-sign-in mr-1"></i> 登录 / 注册
          </button>
        </div>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main id = "main" class="flex-1 lg:ml-64 transition-all duration-300">
      <!-- 顶部导航栏 -->
      <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
          <div class="flex items-center">
            <button id="open-sidebar" class="lg:hidden text-gray-500 hover:text-gray-700 mr-4">
              <i class="fa fa-bars"></i>
            </button>
            <h2 id="page-title" class="text-xl font-semibold text-gray-800">首页</h2>
          </div>
          
          <div class="flex items-center gap-4">
            <div class="relative hidden md:block">
              <input type="text" placeholder="搜索知识库..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
              <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
            </div>
            
            <button class="text-gray-500 hover:text-gray-700 relative">
              <i class="fa fa-bell"></i>
              <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span>
            </button>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <div id="page-content" class="container mx-auto px-4 py-6">
        <!-- 首页 -->
        <div id="home-page" class="page active">
          <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2">
              <div class="bg-gradient-to-r from-primary to-primary/70 rounded-xl p-6 text-white shadow-lg mb-6">
                <h3 class="text-2xl font-bold mb-2">欢迎使用农业技术知识库</h3>
                <p class="text-white/90 mb-4">获取专业农业知识，解决种植难题，提高农作物产量</p>
                <div class="flex flex-wrap gap-3">
                  <button class="bg-white text-primary px-4 py-2 rounded-lg hover:bg-gray-100 transition-all duration-200 font-medium">
                    <i class="fa fa-search mr-1"></i> 搜索知识
                  </button>
                  <button class="bg-transparent border border-white text-white px-4 py-2 rounded-lg hover:bg-white/10 transition-all duration-200">
                    <i class="fa fa-question-circle mr-1"></i> 我要提问
                  </button>
                </div>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <div class="flex items-center justify-between mb-4">
                  <h3 class="font-bold text-lg">最新知识</h3>
                  <a href="#knowledge" class="text-primary text-sm hover:underline">查看全部</a>
                </div>
                
              <div class="space-y-4" id="knowledge-list">
                <!-- 动态渲染的知识卡片将插入此处 -->
                <div class="text-center py-12 text-gray-400" id="loading-placeholder">
                  <i class="fa fa-spinner fa-spin text-2xl mb-2"></i>
                  <p>加载中...</p>
                </div>
              </div>
			  
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6">
                <div class="flex items-center justify-between mb-4">
                  <h3 class="font-bold text-lg">热门问题</h3>
                  <a href="#qa" class="text-primary text-sm hover:underline">查看全部</a>
                </div>
                
                <div class="space-y-4">
                  <div class="p-4 border border-gray-100 rounded-lg card-hover">
                    <h4 class="font-medium mb-2">请问西红柿叶子发黄是什么原因？如何解决？</h4>
                    <div class="flex items-center gap-2 mb-2">
                      <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">已解决</span>
                      <span class="text-gray-500 text-xs">3 个回答</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                      <span>提问者：农民老张</span>
                      <span>2025-05-22</span>
                    </div>
                  </div>
                  
                  <div class="p-4 border border-gray-100 rounded-lg card-hover">
                    <h4 class="font-medium mb-2">小麦倒伏后应该如何处理？</h4>
                    <div class="flex items-center gap-2 mb-2">
                      <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">已解决</span>
                      <span class="text-gray-500 text-xs">2 个回答</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                      <span>提问者：李大伯</span>
                      <span>2025-05-19</span>
                    </div>
                  </div>
                  
                  <div class="p-4 border border-gray-100 rounded-lg card-hover">
                    <h4 class="font-medium mb-2">如何提高草莓的甜度和产量？</h4>
                    <div class="flex items-center gap-2 mb-2">
                      <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">待解决</span>
                      <span class="text-gray-500 text-xs">1 个回答</span>
                    </div>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                      <span>提问者：王阿姨</span>
                      <span>2025-05-17</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div>
              <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <h3 class="font-bold text-lg mb-4">知识分类</h3>
                <div class="space-y-2">
                  <a href="#knowledge" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200">
                    <span class="flex items-center gap-2">
                      <i class="fa fa-leaf text-green-500"></i>
                      <span>种植技术</span>
                    </span>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">24</span>
                  </a>
                  
                  <a href="#knowledge" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200">
                    <span class="flex items-center gap-2">
                      <i class="fa fa-bug text-orange-500"></i>
                      <span>病虫害防治</span>
                    </span>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">18</span>
                  </a>
                  
                  <a href="#knowledge" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200">
                    <span class="flex items-center gap-2">
                      <i class="fa fa-tint text-blue-500"></i>
                      <span>灌溉管理</span>
                    </span>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">12</span>
                  </a>
                  
                  <a href="#knowledge" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200">
                    <span class="flex items-center gap-2">
                      <i class="fa fa-pagelines text-green-600"></i>
                      <span>肥料管理</span>
                    </span>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">16</span>
                  </a>
                  
                  <a href="#knowledge" class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-all duration-200">
                    <span class="flex items-center gap-2">
                      <i class="fa fa-tree text-green-700"></i>
                      <span>果树栽培</span>
                    </span>
                    <span class="text-xs bg-gray-200 px-2 py-1 rounded-full">10</span>
                  </a>
                </div>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                <h3 class="font-bold text-lg mb-4">使用统计</h3>
                <div class="space-y-4">
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm">知识库条目</span>
                      <span class="text-sm font-medium">80+</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div class="bg-primary h-2 rounded-full" style="width: 80%"></div>
                    </div>
                  </div>
                  
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm">常见问题</span>
                      <span class="text-sm font-medium">45</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div class="bg-secondary h-2 rounded-full" style="width: 45%"></div>
                    </div>
                  </div>
                  
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm">活跃用户</span>
                      <span class="text-sm font-medium">120+</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div class="bg-yellow-500 h-2 rounded-full" style="width: 60%"></div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="bg-white rounded-xl shadow-sm p-6">
                <h3 class="font-bold text-lg mb-4">智能问答</h3>
                <p class="text-gray-600 text-sm mb-4">有任何农业技术问题？立即提问获取专业解答</p>
                <button id="ask-question-btn" class="w-full btn-primary">
                  <i class="fa fa-question-circle mr-1"></i> 我要提问
                </button>
              </div>
            </div>
          </div>
        </div>
        
		<!-- 知识库页面 -->
		<div id="knowledge-page" class="page hidden">
		  <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
			<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
			  <h3 class="font-bold text-xl">知识库</h3>
			  
			  <div class="flex flex-wrap gap-3">
				<div class="relative">
				  <select id="category-filter" class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none">
					<option value="0">全部分类</option>
					<option value="1">种植技术</option>
					<option value="2">病虫害防治</option>
					<option value="3">灌溉管理</option>
					<option value="4">肥料管理</option>
				  </select>
				  <i class="fa fa-filter absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
				</div>
				
				<div class="relative">
				  <input id="search-input" type="text" placeholder="搜索知识..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
				  <button id="search-button" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-primary">
					<i class="fa fa-search"></i>
				  </button>
				</div>
			  </div>
			  
			</div>
			
			<!-- 加载状态指示器 -->
			<div id="loading-indicator" class="hidden text-center py-12">
			  <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-primary border-t-transparent"></div>
			  <p class="mt-2 text-gray-500">加载中...</p>
			</div>
			
			<!-- 无数据提示 -->
			<div id="empty-state" class="hidden text-center py-12 text-gray-500">
			  <i class="fa fa-info-circle text-2xl mb-2"></i>
			  <p>暂无相关知识</p>
			</div>
			
			<!-- 错误提示 -->
			<div id="error-state" class="hidden text-center py-12 text-red-500">
			  <i class="fa fa-exclamation-triangle text-2xl mb-2"></i>
			  <p>加载知识失败，请刷新页面重试</p>
			</div>
			
			<!-- 知识列表容器 -->
			<div id="knowledge-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
			  <!-- 动态加载的知识卡片将在这里显示 -->
			</div>
			
			<!-- //分页控件 -->
			<div id="pagination" class="mt-8 flex justify-center">
			  <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
				<a id="prev-page" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
				  <span class="sr-only">上一页</span>
				  <i class="fa fa-chevron-left"></i>
				</a>
				<a id="next-page" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
				  <span class="sr-only">下一页</span>
				  <i class="fa fa-chevron-right"></i>
				</a>
			  </nav>
			</div>
			
			
		  </div>
		</div>
				 <!-- // -------------------------------------------动态生成小卡片----------------------------------------------------------- -->
				 <script src="js/card.js"></script>
        <!-- </div> -->
        		
        <!-- 知识详情页 -->
        <div id="knowledge-detail-page" class="page hidden">
          <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <div class="">
              <h3 class="font-bold text-xl" id="detail-title">新型水稻种植技术要点</h3>
			  
<!--              <div class="flex items-center gap-3 text-sm text-gray-500">
                <span><i class="fa fa-calendar-o mr-1"></i> 2025-05-20</span>
                <span><i class="fa fa-folder-o mr-1"></i> 种植技术</span>
                <span><i class="fa fa-eye mr-1"></i> 328</span>
              </div> -->
			  

            </div>
            
            <div class="border-t border-gray-100 pt-4">
              <div class="prose max-w-none" id="detail-content">
			  <!-- 知识详情 -->
			  </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h3 class="font-bold text-lg mb-4">相关知识</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-all duration-200">
                <a href="#" class="flex items-center gap-3">
                  <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
                    <i class="fa fa-leaf"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-sm">水稻常见病虫害防治技术</h4>
                    <p class="text-gray-500 text-xs">2025-05-15</p>
                  </div>
                </a>
              </div>
              
              <div class="p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-all duration-200">
                <a href="#" class="flex items-center gap-3">
                  <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600">
                    <i class="fa fa-tint"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-sm">水稻节水灌溉技术要点</h4>
                    <p class="text-gray-500 text-xs">2025-05-10</p>
                  </div>
                </a>
              </div>
              
              <div class="p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-all duration-200">
                <a href="#" class="flex items-center gap-3">
                  <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600">
                    <i class="fa fa-pagelines"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-sm">水稻优质高产施肥技术</h4>
                    <p class="text-gray-500 text-xs">2025-05-05</p>
                  </div>
                </a>
              </div>
              
              <div class="p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-all duration-200">
                <a href="#" class="flex items-center gap-3">
                  <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center text-orange-600">
                    <i class="fa fa-sun-o"></i>
                  </div>
                  <div>
                    <h4 class="font-medium text-sm">水稻高温热害防御措施</h4>
                    <p class="text-gray-500 text-xs">2025-04-28</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-bold text-lg mb-4">发表评论</h3>
            <form id="comment-form">
              <div class="mb-4">
                <textarea class="input-field h-32" placeholder="请输入评论内容..."></textarea>
              </div>
              <div class="flex justify-end">
                <button type="button" class="btn-secondary mr-3">取消</button>
                <button type="submit" class="btn-primary">提交评论</button>
              </div>
            </form>
            
            <div class="mt-6 border-t border-gray-100 pt-6">
              <h4 class="font-medium mb-4">已有评论 (3)</h4>
              
              <div class="space-y-4">
                <div class="flex gap-3">
                  <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                    <i class="fa fa-user"></i>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                      <h5 class="font-medium text-sm">农民老张</h5>
                      <span class="text-xs text-gray-500">2025-05-22 10:30</span>
                    </div>
                    <p class="text-sm text-gray-700">这篇文章非常实用，对我帮助很大，谢谢分享！</p>
                    <div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
                      <button class="hover:text-primary"><i class="fa fa-thumbs-up mr-1"></i> 有用 (5)</button>
                      <button class="hover:text-primary"><i class="fa fa-reply mr-1"></i> 回复</button>
                    </div>
                  </div>
                </div>
                
                <div class="flex gap-3">
                  <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                    <i class="fa fa-user"></i>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                      <h5 class="font-medium text-sm">李技术员</h5>
                      <span class="text-xs text-gray-500">2025-05-21 15:45</span>
                    </div>
                    <p class="text-sm text-gray-700">文章内容很全面，但对于水稻分蘖期的管理可以再详细一些，希望能补充相关内容。</p>
                    <div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
                      <button class="hover:text-primary"><i class="fa fa-thumbs-up mr-1"></i> 有用 (3)</button>
                      <button class="hover:text-primary"><i class="fa fa-reply mr-1"></i> 回复</button>
                    </div>
                    
                    <div class="mt-3 ml-6 p-3 bg-gray-50 rounded-lg">
                      <div class="flex items-center justify-between mb-1">
                        <h6 class="font-medium text-xs">管理员回复</h6>
                        <span class="text-xs text-gray-500">2025-05-22 09:15</span>
                      </div>
                      <p class="text-xs text-gray-700">感谢您的建议，我们会在后续的文章中补充水稻分蘖期管理的详细内容。</p>
                    </div>
                  </div>
                </div>
                
                <div class="flex gap-3">
                  <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                    <i class="fa fa-user"></i>
                  </div>
                  <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                      <h5 class="font-medium text-sm">王大叔</h5>
                      <span class="text-xs text-gray-500">2025-05-20 18:20</span>
                    </div>
                    <p class="text-sm text-gray-700">请问现在种植杂交水稻需要注意哪些问题？文章中是否有相关介绍？</p>
                    <div class="mt-2 flex items-center gap-4 text-xs text-gray-500">
                      <button class="hover:text-primary"><i class="fa fa-thumbs-up mr-1"></i> 有用 (2)</button>
                      <button class="hover:text-primary"><i class="fa fa-reply mr-1"></i> 回复</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
		

        
       <!-- 智能问答页面 -->
        <div id="qa-page" class="page hidden  min-h-screen">
          <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h3 class="font-bold text-xl mb-6">智能问答</h3>
             <!-- 新增下拉列表 -->
                <div class="mb-4">
                  <select id="category-select" class="input-field">
                    <option value="种植技术">种植技术</option>
                    <option value="病虫害防治">病虫害防治</option>
                    <option value="灌溉管理">灌溉管理</option>
                    <option value="肥料管理">肥料管理</option>
                  </select>
                </div>
				
            <div class="mb-6">
              <div class="relative">
                <textarea id="question-input" class="input-field h-32 pl-12" placeholder="请输入您的农业技术问题..."></textarea>
                
              </div>
              
              <div class="mt-4 flex justify-end">
                <button id="clear-question-btn" class="btn-secondary mr-3">清除</button>
                <button id="submit-question-btn" class="btn-primary">
                  <i class="fa fa-paper-plane mr-1"></i> 提交问题
                </button>
              </div>
            </div>
			
			<!-- 保留你已有内容 -->
			
			<!-- 回答显示区域 -->
			<div id="qa-response" class="bg-gray-100 text-gray-800 p-4 rounded-lg mt-6 hidden">
			  <p class="font-semibold mb-2">🤖 AI 回复：</p>
			  <div
				id="qa-answer"
				class="whitespace-pre-wrap break-words leading-relaxed max-h-[500px] overflow-y-auto"
			  ></div>
			</div>
		
<!--            <div id="qa-history" class="space-y-4">
              <div class="flex gap-3">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                  <i class="fa fa-user"></i>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 max-w-3xl">
                  <p class="text-gray-800">西红柿叶子发黄是什么原因？如何解决？</p>
                </div>
              </div>
              
              <div class="flex gap-3 justify-end">
                <div class="bg-primary/10 rounded-lg p-4 max-w-3xl">
                  <p class="text-gray-800">西红柿叶子发黄可能有以下几种原因：</p>
                  <ol class="list-decimal pl-5 mt-2 space-y-1">
                    <li>缺氮：表现为老叶先黄，新叶淡绿。可适量追施氮肥。</li>
                    <li>缺镁：表现为叶脉间黄化。可喷施硫酸镁溶液。</li>
                    <li>浇水过多或过少：保持土壤湿润但不过湿。</li>
                    <li>病虫害：如根腐病、叶霉病等。需针对性喷洒农药。</li>
                  </ol>
                  <p class="mt-2">建议先观察发黄症状，确定原因后采取相应措施。如无法判断，建议提供更多细节或图片。</p>
                </div>
                <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-robot"></i>
                </div>
              </div>
              
              <div class="flex gap-3">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                  <i class="fa fa-user"></i>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 max-w-3xl">
                  <p class="text-gray-800">如何提高草莓的甜度和产量？</p>
                </div>
              </div>
              
              <div class="flex gap-3 justify-end">
                <div class="bg-primary/10 rounded-lg p-4 max-w-3xl">
                  <p class="text-gray-800">提高草莓甜度和产量可以从以下几个方面入手：</p>
                  <ul class="list-disc pl-5 mt-2 space-y-1">
                    <li>土壤选择：选择肥沃、排水良好的微酸性土壤。</li>
                    <li>光照管理：保证充足的光照时间，每天至少6小时以上。</li>
                    <li>施肥管理：增施有机肥和磷钾肥，减少氮肥使用。</li>
                    <li>水分控制：结果期保持土壤湿润但不过湿，采收前适当控水。</li>
                    <li>温度调节：草莓生长适温为15-25℃，温度过高或过低都会影响品质。</li>
                    <li>疏花疏果：及时摘除弱花、畸形果，集中养分供应。</li>
                  </ul>
                </div>
                <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center text-primary">
                  <i class="fa fa-robot"></i>
                </div>
              </div>
            </div> -->
			
          </div>
        </div>
       
		<script src="js/submit_question.js"></script>
			
        <!-- 我的提问页面 -->
        <div id="my-questions-page" class="page hidden">
          <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
            <h3 class="font-bold text-xl mb-6">我的提问</h3>
            
            <div class="relative overflow-x-auto">
              <table class="w-full text-sm text-left text-gray-500">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50">
                  <tr>
                    <th scope="col" class="px-6 py-3">问题</th>
                    <th scope="col" class="px-6 py-3">分类</th>
                    <th scope="col" class="px-6 py-3">状态</th>
                    <th scope="col" class="px-6 py-3">提问时间</th>
                    <th scope="col" class="px-6 py-3">操作</th>
                  </tr>
                </thead>
                <tbody>
						<!-- //js渲染 -->
                </tbody>
              </table>
            </div>
            
            <div class="mt-6 flex justify-center">
              <nav class="flex items-center gap-2">
                <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">上一页</a>
                <a href="#" class="px-3 py-1 rounded bg-primary text-white">1</a>
                <a href="#" class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</a>
                <a href="#" class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">下一页</a>
              </nav>
            </div>
          </div>
        </div>
		
		<!-- 放在页面底部 -->
		<script src="js/show_questions.js"></script>
		
		<script>
		  document.addEventListener('DOMContentLoaded', function () {
		    loadMyQuestions(); // 页面加载完成后自动加载
		  });
		</script>
		
		
        <!-- 登录/注册模态框 -->
        <div id="auth-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
          <div class="bg-white rounded-xl shadow-xl w-full max-w-md p-6 transform transition-all">
            <div class="flex justify-between items-center mb-4">
              <h3 class="font-bold text-xl" id="auth-modal-title">用户登录</h3>
              <button id="close-auth-modal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
              </button>
            </div>
            
            <div id="login-form-container">
              <form id="login-form">
                <div class="mb-4">
                  <label for="login-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                  <input type="text" id="login-username" class="input-field" placeholder="请输入用户名">
                </div>
                
                <div class="mb-4">
                  <label for="login-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                  <input type="password" id="login-password" class="input-field" placeholder="请输入密码">
                </div>
                
                <div class="flex items-center justify-between mb-6">
                  <div class="flex items-center">
                    <input type="checkbox" id="remember-me" class="w-4 h-4 text-primary focus:ring-primary border-gray-300 rounded">
                    <label for="remember-me" class="ml-2 text-sm text-gray-600">记住我</label>
                  </div>
                  <a href="#" class="text-sm text-primary hover:underline">忘记密码？</a>
                </div>
                
                <button type="submit" class="w-full btn-primary">登录</button>
              </form>
              
              <div class="mt-4 text-center">
                <p class="text-sm text-gray-600">还没有账号？ <button id="show-register-form" class="text-primary hover:underline">立即注册</button></p>
              </div>
            </div>
            
            <div id="register-form-container" class="hidden">
              <form id="register-form">
                <div class="mb-4">
                  <label for="register-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                  <input type="text" id="register-username" class="input-field" placeholder="请输入用户名">
                </div>
                
                <div class="mb-4">
                  <label for="register-email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                  <input type="email" id="register-email" class="input-field" placeholder="请输入邮箱">
                </div>
                
                <div class="mb-4">
                  <label for="register-phone" class="block text-sm font-medium text-gray-700 mb-1">手机号</label>
                  <input type="tel" id="register-phone" class="input-field" placeholder="请输入手机号">
                </div>
                
                <div class="mb-4">
                  <label for="register-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                  <input type="password" id="register-password" class="input-field" placeholder="请输入密码">
                </div>
                
                <div class="mb-6">
                  <label for="register-confirm-password" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                  <input type="password" id="register-confirm-password" class="input-field" placeholder="请再次输入密码">
                </div>
                
                <button type="submit" class="w-full btn-primary">注册</button>
              </form>
              
              <div class="mt-4 text-center">
                <p class="text-sm text-gray-600">已有账号？ <button id="show-login-form" class="text-primary hover:underline">立即登录</button></p>
              </div>
            </div>
          </div>
        </div>
	  
	  </div>
    </main>
	
  </div>

  <!-- 页脚 -->
  <footer class="bg-white border-t border-gray-200 py-6 lg:ml-64 transition-all duration-300">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <p class="text-sm text-gray-600">© 2025 农业技术知识库与智能问答系统. 保留所有权利.</p>
        </div>
        
        <div class="flex items-center gap-4">
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-weibo"></i>
          </a>
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-wechat"></i>
          </a>
          <a href="#" class="text-gray-500 hover:text-primary">
            <i class="fa fa-envelope"></i>
          </a>
        </div>
      </div>
    </div>
  </footer>

  <script>
    // DOM元素
    const sidebar = document.getElementById('sidebar');
    const openSidebarBtn = document.getElementById('open-sidebar');
    const closeSidebarBtn = document.getElementById('close-sidebar');
    const sidebarLinks = document.querySelectorAll('.sidebar-link');
    const pageTitle = document.getElementById('page-title');
    const pages = document.querySelectorAll('.page');
    const loginBtn = document.getElementById('login-btn');
    const logoutBtn = document.getElementById('logout-btn');
    const userProfile = document.getElementById('user-profile');
    const usernameDisplay = document.getElementById('username-display');
    const authModal = document.getElementById('auth-modal');
    const closeAuthModal = document.getElementById('close-auth-modal');
    const loginFormContainer = document.getElementById('login-form-container');
    const registerFormContainer = document.getElementById('register-form-container');
    const showRegisterForm = document.getElementById('show-register-form');
    const showLoginForm = document.getElementById('show-login-form');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');
    const knowledgeDetailBtns = document.querySelectorAll('[data-id]');
    const questionInput = document.getElementById('question-input');
    const submitQuestionBtn = document.getElementById('submit-question-btn');
    const clearQuestionBtn = document.getElementById('clear-question-btn');
    const qaHistory = document.getElementById('qa-history');
    
    // 侧边栏控制
    openSidebarBtn.addEventListener('click', () => {
      sidebar.classList.remove('-translate-x-full');
    });
    
    closeSidebarBtn.addEventListener('click', () => {
      sidebar.classList.add('-translate-x-full');
    });
    
    // 页面切换
    sidebarLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault();
        
        // 更新活动链接样式
        sidebarLinks.forEach(l => l.classList.remove('active'));
        link.classList.add('active');
        
        // 隐藏所有页面
        pages.forEach(page => page.classList.add('hidden'));
        // 显示选中的页面
        const pageId = link.getAttribute('data-page') + '-page';
		
        const page = document.getElementById(pageId);
        if (page) {
          page.classList.remove('hidden');
          pageTitle.textContent = link.querySelector('span').textContent;
        }
        
        // 在移动端上点击后关闭侧边栏
        if (window.innerWidth < 1024) {
          sidebar.classList.add('-translate-x-full');
        }
      });
    });
	
    
    // 登录/注册模态框控制
    loginBtn.addEventListener('click', () => {
      authModal.classList.remove('hidden');
      loginFormContainer.classList.remove('hidden');
      registerFormContainer.classList.add('hidden');
      document.getElementById('auth-modal-title').textContent = '用户登录';
    });
    
    closeAuthModal.addEventListener('click', () => {
      authModal.classList.add('hidden');
    });
    
    showRegisterForm.addEventListener('click', () => {
      loginFormContainer.classList.add('hidden');
      registerFormContainer.classList.remove('hidden');
      document.getElementById('auth-modal-title').textContent = '用户注册';
    });
    
    showLoginForm.addEventListener('click', () => {
      loginFormContainer.classList.remove('hidden');
      registerFormContainer.classList.add('hidden');
      document.getElementById('auth-modal-title').textContent = '用户登录';
    });
    
	// -------------------------------------------登录表单提交-----------------------------------------------------------
	loginForm.addEventListener('submit', async (e) => {
	    e.preventDefault();
	
	    const username = document.getElementById('login-username').value;
	    const password = document.getElementById('login-password').value;
	
	    // 简单验证
	    if (!username || !password) {
	        showNotification('请输入用户名和密码', 'error');
	        return;
	    }
	
	    // 显示加载状态
	    const submitBtn = loginForm.querySelector('button[type="submit"]');
	    const originalText = submitBtn.innerHTML;
	    submitBtn.disabled = true;
	    submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 登录中...';
	
	    try {
	        // 使用 Axios 发送登录请求
	        const response = await axios.post('http://localhost:8080/api/users/login', {
	            username,
	            password
	        });
	
	        // 处理登录成功
	        const { token, user } = response.data.data;
	
	        // 存储 token 到 localStorage
	        localStorage.setItem('token', token);
	        // 存储用户名到 localStorage
	        localStorage.setItem('username', user.username);
			localStorage.setItem('userid', user.id);
	
	        // 更新 UI
	        usernameDisplay.textContent = user.username;
	        userProfile.classList.remove('hidden');
	        loginBtn.classList.add('hidden');
	
	        authModal.classList.add('hidden');
	        showNotification('登录成功！', 'success');
	
	        // 移除页面跳转代码
	        // setTimeout(() => {
	        //     window.location.href = 'index_enhanced.html';
	        // }, 1500);
	    } catch (error) {
	        // 处理登录失败
	        console.error('登录失败:', error);
	
	        let errorMessage = '网络错误，请稍后重试';
	        if (error.response) {
	            // 服务器返回错误状态码
	            errorMessage = error.response.data.message || '用户名或密码错误';
	        }
	
	        showNotification(errorMessage, 'error');
	    } finally {
	        // 恢复按钮状态
	        submitBtn.disabled = false;
	        submitBtn.innerHTML = originalText;
	    }
	});
	
		// -------------------------------------------注册表单提交-----------------------------------------------------------
	registerForm.addEventListener('submit', async (e) => {
	  e.preventDefault();
	  
	  const username = document.getElementById('register-username').value;
	  const email = document.getElementById('register-email').value;
	  const phone = document.getElementById('register-phone').value;
	  const password = document.getElementById('register-password').value;
	  const confirmPassword = document.getElementById('register-confirm-password').value;
	  
	  // 简单验证
	  if (!username || !email || !phone || !password) {
	    showNotification('请填写所有必填字段', 'error');
	    return;
	  }
	  
	  if (password !== confirmPassword) {
	    showNotification('两次输入的密码不一致', 'error');
	    return;
	  }
	  
	  // 显示加载状态
	  const submitBtn = registerForm.querySelector('button[type="submit"]');
	  const originalText = submitBtn.innerHTML;
	  submitBtn.disabled = true;
	  submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';
	  
	  try {
	    // 使用 Axios 发送注册请求
	    const response = await axios.post('http://localhost:8080/api/users/register', {
	      username,
	      email,
	      phone,
	      password
	    });
	    
	    console.log('注册响应:', response.data); // 注意：响应数据在 response.data 中
	    
	    // 检查业务状态码
	    if (response.data.code !== 200) {
	      throw new Error(response.data.message || '注册失败');
	    }
	    
	    // 处理注册成功
	    showNotification('注册成功！请登录', 'success');
	    
	    // 显示登录表单
	    showLoginForm.click();
	  } catch (error) {
	    // 处理注册失败
	    console.error('注册失败:', error);
	    
	    let errorMessage = '网络错误，请稍后重试';
	    
	    // 处理服务器返回的错误
	    if (error.response && error.response.data) {
	      errorMessage = error.response.data.message || '注册失败，请检查输入';
	    } 
	    // 处理手动抛出的错误
	    else if (error.message) {
	      errorMessage = error.message;
	    }
	    
	    showNotification(errorMessage, 'error');
	  } finally {
	    // 恢复按钮状态
	    submitBtn.disabled = false;
	    submitBtn.innerHTML = originalText;
	  }
	});
	
		// -------------------------------------------最新知识渲染3条-----------------------------------------------------------
	document.addEventListener('DOMContentLoaded', async function() {
	  const knowledgeList = document.getElementById('knowledge-list');
	
	  try {
	    // 模拟API请求（需替换为你的实际API地址）
	    const response = await axios.get('http://localhost:8080/api/knowledge/latest/3');
	    const knowledges = response.data.data; // 假设API返回 { data: [...] }
	    
	    // 隐藏加载提示
	    document.getElementById('loading-placeholder').style.display = 'none';
	    
	    if (knowledges && knowledges.length > 0) {
	      knowledgeList.innerHTML = ''; // 清空原有内容
	      
	      knowledges.forEach(item => {
	        // 创建卡片元素
	        const card = document.createElement('div');
	        card.className = 'p-4 border border-gray-100 rounded-lg card-hover';
	        
	        // 格式化日期（处理可能的null值）
	        const date = item.createTime 
	          ? new Date(item.createTime).toLocaleDateString('zh-CN') 
	          : '未设置';
	        
	        // 处理分类名称（若后端返回categoryId，需映射为名称，此处假设返回categoryName）
	        const category = item.categoryName || '未分类';
	        
	        // 动态生成卡片内容
	        card.innerHTML = `
	          <h4 class="font-medium mb-1">${item.title}</h4>
	          <p class="text-gray-600 text-sm mb-2">
	            ${item.content.length > 100 
	              ? item.content.slice(0, 100) + '...' 
	              : item.content || '暂无简介'}
	          </p>
	          <div class="flex items-center justify-between text-xs text-gray-500">
	            <span>${date}</span>
	            <span>${category}</span>
	          </div>
	        `;
	        
	        // 添加点击事件（跳转到详情页）
	        // card.addEventListener('click', () => {
	        //   window.location.href = `/knowledge/detail?id=${item.id}`;
	        // });
	        
	        // 将卡片添加到页面
	        knowledgeList.appendChild(card);
	      });
	    } else {
	      // 无数据时显示提示
	      knowledgeList.innerHTML = `
	        <div class="text-center py-12 text-gray-500">
	          <i class="fa fa-info-circle text-2xl mb-2"></i>
	          <p>暂无相关知识</p>
	        </div>
	      `;
	    }
	  } catch (error) {
	    console.error('数据加载失败:', error);
	    knowledgeList.innerHTML = `
	      <div class="text-center py-12 text-red-500">
	        <i class="fa fa-exclamation-triangle text-2xl mb-2"></i>
	        <p>加载知识失败，请刷新页面重试</p>
	      </div>
	    `;
	  }
	});
		
		
		// 知识详情页导航
		knowledgeDetailBtns.forEach(btn => {
		  btn.addEventListener('click', () => {
		    // 隐藏所有页面
		    pages.forEach(page => page.classList.add('hidden'));
		    
		    // 显示知识详情页
		    document.getElementById('knowledge-detail-page').classList.remove('hidden');
		    pageTitle.textContent = document.querySelector(`[data-id="${btn.getAttribute('data-id')}"]`).closest('div').querySelector('h4').textContent;
		    document.getElementById('detail-title').textContent = pageTitle.textContent;
		  });
		});
		
		        
	// 显示通知提示
	function showNotification(message, type) {
	  // 创建通知元素
	  const notification = document.createElement('div');
	  notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-all duration-500 flex items-center space-x-3 z-50 ${
	    type === 'success' ? 'bg-green-500 text-white' : 'bg-red-500 text-white'
	  }`;
	  
	  notification.innerHTML = `
	    <i class="fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
	    <span>${message}</span>
	  `;
	  
	  // 添加到页面
	  document.body.appendChild(notification);
	  
	  // 显示动画
	  setTimeout(() => {
	    notification.classList.add('opacity-100');
	    notification.classList.remove('opacity-0', 'translate-y-[-20px]');
	  }, 10);
	  
	  // 3秒后隐藏
	  setTimeout(() => {
	    notification.classList.add('opacity-0', 'translate-y-[-20px]');
	    notification.classList.remove('opacity-100');
	    
	    // 完全隐藏后移除元素
	    setTimeout(() => {
	      document.body.removeChild(notification);
	    }, 500);
	  }, 3000);
	}
	

    // 退出登录
logoutBtn.addEventListener('click', () => {
  usernameDisplay.textContent = '用户名';
  userProfile.classList.add('hidden');
  loginBtn.classList.remove('hidden');

  // 清理所有登录相关 localStorage 数据，确保退出彻底
  localStorage.removeItem('token');
  localStorage.removeItem('username');
  localStorage.removeItem('userid');  // 注意是 'userid'，和登录时一致

  alert('已成功退出登录');
});
   
    // 清空问题
    clearQuestionBtn.addEventListener('click', () => {
      questionInput.value = '';
    });
    
    // 点击提问按钮
    document.getElementById('ask-question-btn').addEventListener('click', () => {
      // 检查是否登录
      if (userProfile.classList.contains('hidden')) {
        loginBtn.click();
        return;
      }
      
      // 切换到智能问答页面
      sidebarLinks.forEach(l => l.classList.remove('active'));
      document.querySelector('[data-page="qa"]').classList.add('active');
      
      pages.forEach(page => page.classList.add('hidden'));
      document.getElementById('qa-page').classList.remove('hidden');
      pageTitle.textContent = '智能问答';
      
      // 聚焦到问题输入框
      setTimeout(() => {
        questionInput.focus();
      }, 300);
    });
    
    // 初始化显示首页
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('home-page').classList.remove('hidden');
    });



  </script>
  
</body>
</html>